<!-- Bubble.vue -->
<template>
  <view class="obj_bubble-outer">
    <view class="obj_bubble-container">
      <!-- 开关容器 -->
      <view class="obj_switch-container">
        <switch
          :checked="showBubble"
          @change="handleSwitchChange"
          style="transform: scale(0.8)"
          color="#8B5E3C"
        />
      </view>
      <!-- 气泡框 -->
      <view v-if="showBubble" class="obj_bubble-box">
        <view
          class="obj_bubble-content"
          :class="{
            'obj_bubble-animated': showBubble && !slideOut,
            'obj_bubble-slide-out': slideOut
          }"
          @click.stop
        >
          <view class="obj_bubble-grid">
            <view
              v-for="(item, index) in bubbleItems"
              :key="index"
              class="obj_bubble-item"
              :class="{ 'obj_bubble-active': item.active }"
              @tap="handleBubbleClick(index)"
            >
              {{ item.text }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "Bubble",
  props: {
    // 外部传入的 bubbleItems 数组
    bubbleItems: {
      type: Array,
      required: true,
    },
    // 外部控制气泡是否显示的状态
    value: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      showBubble: this.value, // 初始值从 props 中获取
      slideOut: false,
    };
  },
  watch: {
    // 监听 v-model 绑定的 showBubble 状态变化
    value(newValue) {
      this.showBubble = newValue;
    },
    showBubble(newValue) {
      this.$emit('update:value', newValue); // 通过 v-model 更新父组件的状态
    }
  },
  methods: {
    handleSwitchChange(e) {
      if (e.detail.value) {
        this.openBubble();
      } else {
        this.closeBubble();
      }
    },
    openBubble() {
      this.showBubble = true;
      this.slideOut = false;
    },
    closeBubble() {
      this.slideOut = true;
      setTimeout(() => {
        this.showBubble = false;
        this.slideOut = false;
      }, 300);
    },
    handleBubbleClick(index) {
      this.$emit('update:bubbleItems', this.updateBubbleItems(index)); // 更新父组件传入的 bubbleItems
    },
    updateBubbleItems(index) {
      return this.bubbleItems.map((item, i) => {
        return {
          ...item,
          active: i === index,
        };
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.obj_bubble-outer {
  position: relative;
  width: 100%;
  padding: 20rpx;
}

.obj_bubble-container {
  position: relative;
  width: 100%;
}

.obj_switch-container {
  padding: 20rpx;
  position: relative;
  z-index: 1000;
}

.obj_bubble-box {
  position: absolute;
  top: 110rpx;
}

.obj_bubble-content {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  width: 100%;
  position: relative;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
  transform-origin: top left;
  transform: scale(0.5);
  opacity: 0;

  &::before {
    content: '';
    position: absolute;
    top: -12rpx;
    left: 40rpx;
    border-left: 12rpx solid transparent;
    border-right: 12rpx solid transparent;
    border-bottom: 12rpx solid #fff;
    filter: drop-shadow(0 -2rpx 2rpx rgba(0, 0, 0, 0.08));
  }
}

.obj_bubble-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16rpx;
  width: 100%;
}

.obj_bubble-item {
  height: 64rpx;
  width: 200rpx;
  background-color: #f5f5f5;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #333;
  transition: all 0.3s;
}

.obj_bubble-active {
  background: #8b5e3c;
  color: #fff;
}

@keyframes bubbleIn {
  from {
    transform: translateY(-20rpx) scale(0.5);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes bubbleOut {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateY(-20rpx) scale(0.5);
    opacity: 0;
  }
}

.obj_bubble-animated {
  animation: bubbleIn 0.3s ease forwards;
}

.obj_bubble-slide-out {
  animation: bubbleOut 0.3s ease forwards;
}
</style>
